<template>
  <div class="body" ref="body">
    <div :class="'message-' + classFlow">
      <div :class="'head-' + classFlow">
        <el-avatar shape="square" :src="source.fromProfile.fromHead" />
      </div>
      <div :class="'bubble-' + classFlow">
        <div class="label" v-if="this.source.sessionType === 'GROUP'">
          {{ source.fromProfile.fromNick }}
        </div>
        <div v-if="source.fail" class="fail">
          <i class="el-icon-warning"></i>
        </div>
        <div class="value">{{ message }}</div>
        <div class="arrow"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      classFlow: this.source.msgFlow === "OUT" ? "right" : "left",
      color: this.source.msgFlow === "OUT" ? "#45e18f" : "#fff",
      bubbleTop: this.source.sessionType === "C2C" ? "12px" : "28px",
    };
  },
  name: "Message",
  props: {
    source: {
      type: Object,
      default() {
        return {
          messageId: "",
          fromProfile: {},
          fromId: "",
          toId: "",
          sessionId: "",
          sessionType: "GROUP",
          msgType: "TEXT",
          msgFlow: "IN",
          createTime: 0,
          playload: {},
          fail: false,
        };
      },
    },
  },
  mounted() {
    let width = this.$refs.body.offsetWidth;
    this.$refs.body.style.setProperty(
      "--bubbleMaxWidth",
      width * 0.8 - 70 + "px"
    );
    this.$refs.body.style.setProperty("--color", this.color);
    this.$refs.body.style.setProperty("--bubbleTop", this.bubbleTop);
  },
  computed: {
    message() {
      return this.source.playload.text;
    },
  },
};
</script>

<style scoped>
.body {
  width: 100%;
  --bubbleMaxWidth: 50px;
  --color: #45e18f;
  --bubbleTop: 12px;
}
.badge-icon {
  display: block;
  font-size: 12px;
  line-height: 16px;
}
.message-right {
  width: 80%;
  float: right;
}
.bubble-right {
  float: right;
  position: relative;
  width: auto;
  max-width: var(--bubbleMaxWidth);
  margin-right: 16px;
}

.bubble-right .fail {
  position: absolute;
  left: -20px;
  top: 10px;
  color: red;
}
.bubble-right .label {
  font-size: 12px;
  text-align: right;
  margin-bottom: 3px;
}
.bubble-right .value {
  width: auto;
  word-wrap: break-word;
  word-break: normal;
  font-size: 14px;
  padding: 10px 10px;
  background: var(--color);
  border-radius: 5px; /* 圆角 */
}

.bubble-right .arrow {
  position: absolute;
  top: var(--bubbleTop);
  right: -16px; /* 圆角的位置需要细心调试哦 */
  width: 0;
  height: 0;
  font-size: 0;
  border: solid 8px;
  border-color: #dadee700 #dadee700 #dadee700 var(--color);
}

.head-right {
  margin-right: 10px;
  float: right;
  width: 40px;
}

.message-left {
  width: 80%;
  float: left;
}
.bubble-left {
  float: left;
  position: relative;
  width: auto;
  max-width: var(--bubbleMaxWidth);
  margin-left: 16px;
}
.bubble-left .label {
  font-size: 12px;
  text-align: left;
  margin-bottom: 3px;
}
.bubble-left .value {
  width: auto;
  font-size: 14px;
  padding: 10px 10px;
  background: var(--color);
  border-radius: 5px; /* 圆角 */
}

.bubble-left .arrow {
  position: absolute;
  top: var(--bubbleTop);
  left: -16px; /* 圆角的位置需要细心调试哦 */
  width: 0;
  height: 0;
  font-size: 0;
  border: solid 8px;
  border-color: #dadee700 var(--color) #dadee700 #dadee700;
}

.head-left {
  margin-left: 10px;
  float: left;
  width: 40px;
}
</style>